<template>
  <div class="todo-list">
    <h2>Todo List</h2>
    <h3>待办任务</h3>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="handleTodo(index)">处理</button>
      </li>
    </ul>
    <h3>已办任务</h3>
    <ul>
      <li v-for="(doneTodo, index) in doneTodos" :key="index">
        {{ doneTodo }}
        <button @click="undoTodo(index)">撤回</button>
      </li>
    </ul>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
      doneTodos: [],
      newTodo: ''
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() !== '') {
        this.todos.push(this.newTodo);
        this.newTodo = '';
      }
    },
    handleTodo(index) {
      const todo = this.todos.splice(index, 1)[0];
      this.doneTodos.push(todo);
    },
    undoTodo(index) {
      const doneTodo = this.doneTodos.splice(index, 1)[0];
      this.todos.push(doneTodo);
    }
  }
};
</script>

<style scoped>
.todo-list {
  margin: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>